<template>
  <a-form-model ref="form_" :model="model.customs" :rules="validatorRules_" slot="detail">
    <div class="sku-title">报关信息</div>
    <a-col :span="8">
      <a-form-model-item label="中文报关名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nameCn">
        <a-input v-model.trim="model.customs.nameCn" placeholder="请输入中文报关名"  ></a-input>
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="英文报关名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nameEn">
        <a-input v-model.trim="model.customs.nameEn" placeholder="请输入英文报关名"  ></a-input>
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="中文材质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCn">
        <a-input v-model.trim="model.customs.materialCn" placeholder="请输入中文材质"  ></a-input>
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="英文材质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialEn">
        <a-input v-model.trim="model.customs.materialEn" placeholder="请输入英文材质"  ></a-input>
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="长(cm)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="length">
        <a-input-number v-model="model.customs.length" placeholder="请输入长(cm)" :precision="2"  />
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="宽(cm)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="width">
        <a-input-number v-model="model.customs.width" placeholder="请输入宽(cm)" :precision="2" />
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="高(cm)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="height">
        <a-input-number v-model="model.customs.height" placeholder="请输入高(cm)" :precision="2" />
      </a-form-model-item>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="抛重(kg))" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="volumetricWeight">
        <a-input-number v-model="volumetricWeight" placeholder="请输入抛重(kg)" disabled  />
      </a-form-model-item>
      <div style="margin-top: -20px; color: #aaa;">默认系数：6000</div>
    </a-col>
    <a-col :span="8">
      <a-form-model-item label="抛重比(kg)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="volumetricWeightRatio">
        <a-input-number v-model="volumetricWeightRatio" placeholder="请输入抛重比(kg)" disabled  />
      </a-form-model-item>
      <div style="margin-top: -20px; color: #aaa;">默认系数：6000</div>
    </a-col>
  </a-form-model>
</template>

<script>
export default {
  name: 'SkuDeclare',
  props: {
    model: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules_: {
        nameCn: [
          { required: true, message: '请输入中文报关名!'},
          { validator: this.nameCnValidator}
        ],
        nameEn: [
          { required: true, message: '请输入英文报关名!'},
          { validator: this.nameEnValidator}
        ],
        materialCn: [
          { required: true, message: '请输入中文材质!'},
        ],
        materialEn: [
          { required: true, message: '请输入英文材质!'},
        ],
        length: [
          { required: true, message: '请输入长(cm)!'},
        ],
        width: [
          { required: true, message: '请输入宽(cm)!'},
        ],
        height: [
          { required: true, message: '请输入高(cm)!'},
        ],
        // volumetricWeight: [
        //   { required: true, message: '请输入抛重(kg)!'},
        // ],
        // volumetricWeightRatio: [
        //   { required: true, message: '请输入抛重比(kg)!'},
        // ]
      }
    }
  },
  computed: {
    volumetricWeight(){
      if(!(this.model.customs.length && this.model.customs.width && this.model.customs.height)){
        this.model.customs.volumetricWeight = '';
        return '';
      }
      this.model.customs.volumetricWeight = ((this.model.customs.length * 100 * this.model.customs.width * 100 * this.model.customs.height * 100) / (100 * 100 * 100 * 6000)).toFixed(2);
      return this.model.customs.volumetricWeight;
    },
    volumetricWeightRatio(){
      if(this.model.weight && this.volumetricWeight){
        this.model.customs.volumetricWeightRatio = (this.volumetricWeight / this.model.weight).toFixed(2);
      }else{
        this.model.customs.volumetricWeightRatio = '';
      }
      return this.model.customs.volumetricWeightRatio;
    }
  },
  methods: {
    getCustomsList(){
      return new Promise((resolve, reject) => {
        this.$refs.form_.validate(valid => {
          if(valid){
            resolve(true);
          }else{
            resolve(valid);
          }
        })
      })
    },
    nameCnValidator(rule,value,callback){
      if (!value || /^[\u4e00-\u9fff]+$/.test(value)){
        callback();
      }else{
        callback("仅可输入中文!");
      }
    },
    nameEnValidator(rule,value,callback){
      if (!value || /^[a-zA-Z ]+$/.test(value)){
        callback();
      }else{
        callback("仅可输入英文和空格!");
      }
    }
  }
}
</script>